<!--
 * @Descripttion: 视频监控
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-07-27 15:08:51
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-08-04 17:29:17
-->
<template>
  <div class="container">
    <div class="showBox" v-if="isShow">
      <div class="showBoxContent">
        <div class="projectTime">
          <span>开工日期: {{ projectInfo.startDate || '-- ' }}</span>
          <span>竣工日期: {{ projectInfo.endDate || '-- ' }}</span>
          <span class="leftAfterCompletion">
            <span v-if="projectInfo.disDate >= 0"
              >距离计划竣工还剩:{{ projectInfo.disDate || '-- ' }}天</span
            >
            <span v-if="projectInfo.disDate < 0"
              >超出计划竣工{{ Math.abs(projectInfo.disDate) || '-- ' }}天</span
            >
          </span>
        </div>
        <div class="projectShow">
          <div class="videoShow" id="videoShowBox" v-if="isShow">
            <iframe
              v-if="isShowVideo"
              frameborder="0"
              :src="newUrl"
              width="100%"
              height="100%"
              id="ysOpenDevice"
              allowfullscreen
            >
            </iframe>
            <div v-else class="defaultVideoStyle">
              <div class="videoImg"></div>
            </div>
          </div>
          <div class="projectDetail">
            <ul :class="[isHeight ? '' : 'mB5', 'item']">
              <li class="itemIcon fl">
                <span class="itemTitle">投资类别</span>
                <span class="itemContent">{{
                  projectInfo.investmentDesc || '--'
                }}</span>
              </li>
              <li class="itemIcon fr">
                <span class="itemTitle">所属行业</span>
                <span class="itemContent">{{
                  projectInfo.industryName || '--'
                }}</span>
              </li>
            </ul>
            <div :class="[isHeight ? '' : 'mB5', 'item', 'itemList']">
              <span class="itemTitle">工程造价</span>
              <span class="itemContent">{{ projectInfo.total || '--' }}元</span>
            </div>
            <div :class="[isHeight ? '' : 'mB5', 'item', 'itemList']">
              <span class="itemTitle">项目部详细地址</span>
              <span class="itemContent">{{ projectInfo.address || '--' }}</span>
            </div>
            <div :class="[isHeight ? '' : 'mB5', 'item', 'itemList']">
              <span class="itemTitle">施工(总承包)单位</span>
              <span class="itemContent">{{ projectInfo.pbName || '--' }}</span>
            </div>
            <div :class="[isHeight ? '' : 'mB5', 'item', 'itemList']">
              <span class="itemTitle">统一社会信用代码</span>
              <span class="itemContent">{{ projectInfo.pbUscc || '--' }}</span>
            </div>
            <div :class="[isHeight ? '' : 'mB5', 'item', 'itemList']">
              <span class="itemTitle">施工许可证号</span>
              <span class="itemContent">{{ projectInfo.license || '--' }}</span>
            </div>
            <ul :class="[isHeight ? '' : 'mB5', 'item']">
              <li class="itemIcon fl">
                <span class="itemTitle">项目经理</span>
                <span class="itemContent">{{
                  projectInfo.managerName || '--'
                }}</span>
              </li>
              <li class="itemIcon fr">
                <span class="itemTitle">联系方式</span>
                <span class="itemContent">{{
                  projectInfo.managerTel || '--'
                }}</span>
              </li>
            </ul>
            <ul class="item">
              <li class="itemIcon fl">
                <span class="itemTitle">劳资专管员</span>
                <span class="itemContent">{{
                  projectInfo.laborAdmin || '--'
                }}</span>
              </li>
              <li class="itemIcon fr">
                <span class="itemTitle">联系方式</span>
                <span class="itemContent">{{
                  projectInfo.laborAdminPhone || '--'
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'videoSurveillance',
  data() {
    return {
      boxWidth: '',
      boxHeight: '',
      projectInfo: '',
      isShow: true,
      isHeight: true,
      newUrl: '',
    }
  },
  created() {
    this.getAccessToken()
    this.getProjectdetail()
    this.getInitVideo()
    // var x=document.getElementById("ysOpenDevice");
    // var y=(x.contentWindow || x.contentDocument);
    // if (y.document)y=y.document;
    //     y.body.style.overflow="hidden";
  },
  computed: {
    projectId() {
      return this.$store.getters.eZhouprojectId
    },
    videoShowSrc() {
      return this.$store.getters.videoShowSrc
    },
    isShowVideo() {
      return this.$store.getters.isShowVideo
    },
  },
  mounted() {
    const windowHeight = window.screen.height
    if (windowHeight <= 900) {
      this.isHeight = false
    }
  },
  methods: {
    /**
     * @description: 获取项目详情
     */
    getProjectdetail() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/initdata',
        data: {
          id: this.projectId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectInfo = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    /**
     * @description: 视频监控
     */
    getInitVideo() {
      /* 获取播放器元素 */
      var player = document.getElementById('ysOpenDevice').contentWindow
      /* iframe 支持方法 */
      player.postMessage(
        'play',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 播放 */
      player.postMessage(
        'stop',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 结束 */
      player.postMessage(
        'capturePicture',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 截图 */
      player.postMessage(
        'openSound',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 开启声音 */
      player.postMessage(
        'closeSound',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 关闭声音 */
      player.postMessage(
        'startSave',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 开始录制 */
      player.postMessage(
        'stopSave',
        'https://open.ys7.com/ezopen/h5/iframe'
      ) /* 结束录制 */
    },
    /**
     * @description: 初始化视频云台宽高
     */
    changeSonSize() {
      const vm = this
      vm.isShow = false
      setTimeout(function () {
        vm.isShow = true
      }, 3)
    },
    getAccessToken() {
      // console.log(this.videoShowSrc)
      // this.newUrl =  this.changeUrlArg(this.videoShowSrc,"accessToken","at.9l4y2ahncar5k04d0cwzgjb15tsmcsiq-1hqyk6wgup-19tmnmu-0iiafyx7z");
      // console.log(this.newUrl)
      // return
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/refresh',
      })
        .then(
          (response) => {
            this.newUrl = this.changeUrlArg(
              this.videoShowSrc,
              'accessToken',
              response.data.result
            )
            // this.videoShowSrc =  newUrl;
            // console.log(this.videoShowSrc)
            // console.log(newUrl)
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    changeUrlArg(url, arg, val) {
      var pattern = arg + '=([^&]*)'
      var replaceText = arg + '=' + val
      return url.match(pattern)
        ? url.replace(eval('/(' + arg + '=)([^&]*)/gi'), replaceText)
        : url.match('[\?]')
        ? url + '&' + replaceText
        : url + '?' + replaceText
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .searchInput {
    width: calc(100% - 50px);
    height: 33px;
    span {
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #5bfcf4;
    }
  }
  .showBox {
    width: 100%;
    height: calc(100% - 3px);
    position: relative;
    .showBoxContent {
      width: calc(100% - 32px);
      height: calc(100% - 32px);
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      .projectTime {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        .leftAfterCompletion {
          float: right;
          color: #f5ca21;
          line-height: 30px;
        }
      }
      .projectShow {
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
        .videoShow {
          width: calc(50% - 5px);
          height: 100%;
          // background-color: #326188;
          float: left;
          .defaultVideoStyle {
            width: 100%;
            height: 100%;
            background-color: #326188;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .videoImg {
              width: 61px;
              height: 69px;
              background: url('../../assets/videoImg.png') center center
                no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .projectDetail {
          width: calc(50% - 5px);
          height: 100%;
          float: right;
          display: flex;
          flex-flow: column; //垂直排列
          justify-content: space-between; //两端对齐
          .item {
            width: 100%;
            height: 31px;
            font-size: 12px;
            color: #ffffff;
            .itemIcon {
              width: calc(50% - 7.5px);
              height: 100%;
              padding: 0px 8px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border: 1px solid #01b0ff;
              background: linear-gradient(
                0deg,
                rgba(19, 235, 241, 0.2) 0%,
                rgba(19, 240, 249, 0.2) 100%
              );
              // opacity: 0.6;
              border-radius: 5px;
            }
          }
          .itemList {
            padding: 0px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #01b0ff;
            background: linear-gradient(
              0deg,
              rgba(19, 235, 241, 0.2) 0%,
              rgba(19, 240, 249, 0.2) 100%
            );
            // opacity: 0.6;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
.itemTitle {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #b8e8fa;
}
.itemContent {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #5bfcf4;
}
#ysOpenDevice /deep/ body {
  overflow: hidden !important;
}
.mB5 {
  margin-bottom: 5px;
}
</style>
